<template>
  <div class="box-border w-full h-full">
    <div class="flex items-center justify-between h-[60px]">
      <el-upload
        class="mt-2 ml-2"
        :show-file-list="false"
        accept="image/*"
        :before-upload="beforeUpload"
      >
        <!-- <div class="flex justify-center items-center ml-4 custom-button">导入</div> -->
      </el-upload>
      <div class="flex items-center h-full">
        <div
          v-for="item in graphData"
          :key="item.id"
          :class="[
            'w-[140px] h-full bg-[#F2F2F2]/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-[5px_5px_13px_0px_rgba(0,0,0,0.25)] rounded-md duration-300',
            {
              '!bg-white shadow-[5px_5px_13px_0px_rgba(0,0,0,0.25)] rounded-md':
                currentId === item.id
            }
          ]"
          @click="handleClick(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 添加图片显示区域 -->
    <div class="w-full h-[calc(100%-80px)] mt-5">
      <overview v-if="currentId === 0" />
      <img v-else :src="currentImage" class="object-contain w-full h-full" alt="graph" />
    </div>
  </div>
</template>

<script setup>
// import qxzl from '@/assets/images/qxzl.webp'
import graph_701 from '@/assets/images/graph_7012.bmp'
import graph_81 from '@/assets/images/graph_812.bmp'
import graph_bkz from '@/assets/images/graph_bkz2.bmp'
import graph_weh from '@/assets/images/graph_weh2.bmp'
import graph_z from '@/assets/images/graph_z2.bmp'
import overview from './overview.vue'

const route = useRoute()

const currentId = ref(0)
const graphData = ref([
  {
    id: 0,
    name: '全线总览',
    image: ''
  },
  {
    id: 1,
    name: '乌尔禾',
    image: graph_weh
  },
  {
    id: 2,
    name: '百克站',
    image: graph_bkz
  },
  {
    id: 3,
    name: '701#站',
    image: graph_701
  },
  {
    id: 4,
    name: '81#站',
    image: graph_81
  },
  {
    id: 5,
    name: '总站',
    image: graph_z
  }
])

const currentImage = computed(() => {
  return graphData.value.find((item) => item.id === currentId.value)?.image
})

const handleClick = (id) => {
  currentId.value = id
}

// 初始化时从路由query获取id
currentId.value = Number(route.query.id) || 0

// 监听路由query变化
watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      currentId.value = Number(newId) || 0
    }
  }
)

// 添加上传前的处理函数
const beforeUpload = (file) => {
  // 检查文件类型
  const isImage = file.type.startsWith('image/')
  // 限制文件大小为 5MB
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB！')
    return false
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    const currentItem = graphData.value.find((item) => item.id === currentId.value)
    if (currentItem) {
      currentItem.image = e.target.result
      // 添加上传成功提示
      ElMessage.success('图片上传成功')
    }
  }
  reader.readAsDataURL(file)
  return false
}
</script>

<style lang="scss" scoped>
.custom-button {
  background-image: url('../../assets/images/unActive_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 80px;
  height: 30px;
  color: white;
  cursor: pointer;
  &:hover {
    background-image: url('../../assets/images/active_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>
